<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #faf9f9;
        }
        .iot_ding {
            width: 414px;
            height: 50px;
            font-size: 22px;
            position: relative;
            text-align: center;
            line-height: 50px;
            position: fixed;
            top: 0;
            background-color: #fff;

        }
        .iot_retu {
            height: 123px;
            width: 414px;
            position: fixed;
            top: 50px;
        }
        .iot_retuxia {
            height: 60px;
            position: fixed;
            background-color: #fff;
            width: 400px;
            margin-left: 7px;
            border-radius: 7px;
            top: 150px;
        }
        .iot_mulu {
            width: 200px;
            height: 60px;
            text-align: center;
            color: #878787;
            line-height: 60px;
            float: left;
            background-color:#fff;
            cursor: pointer;
        }
        .on {
            background-image: url(../images/横线.png);
            background-repeat:no-repeat; 
            background-position-x:85px ;
            background-position-y:30px ;
        }
        .iot_sangping,.iot_sangpingyou{
            margin-top: 230px;
            height: 666px;
            display: none;
        }
        .active {
            display: block
        }
            .iot_sangping1,.iot_sangping11 {
            width: 414px;
            background-color:#faf9f9;
        }
        .iot_sangping1 li,.iot_sangping11 li {
            width: 188px;
            height: 280px;
            display:inline-block;
            background-color: #fff;
            border:#faf9f9 5px solid ;
            margin-left: 5px;
            border-radius: 10px;
        }
        .iot_sangping1 li a,.iot_sangping11 li a {
            width: 188px;
            height: 280px;
            display: block;
            cursor: pointer;
        }
        .iot_sangping1 li  a img,.iot_sangping11 li  a img {
            width: 170px;
            height: 170px;
            margin-left: 9px;
            margin-top: 12px;
        }
        .iot_sangping1 li a div,.iot_sangping11 li a div {
            width: 170px;
            height: 50px;
            font-size: 14px;
            margin-left: 9px;
            margin-top: 5px;
            color: #636262;
        }
        .iot_sangping1 li a span,.iot_sangping11 li a span {
            width: 170px;
            height:40px;
            display: block;
            color: red;
            font-size: 14px;
            margin-left: 9px;
        }

    </style>
</head>
<body>
    <div  class="iot_ding">
        <a href="../考核2.html"><img src="../images/left.png" style="left: 5px;top:12px;position:absolute;width: 25px;"></a>  一站买全
    </div>
    <div class="iot_retu">
        <img id="iot_retu" width="414px">
    </div>
    <div class="iot_retuxia">
        <div class="iot_mulu on" data-id="0" id="iot_mulu1">搞定熊孩子</div>
        <div class="iot_mulu" data-id="1" id="iot_mulu2">家里不凌乱</div>
    </div>
    <div id="iot_sangping">
        <div class="iot_sangping active" data-id="0">
            <ul class="iot_sangping1">
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
            </ul>
        </div>
        <div class="iot_sangpingyou" data-id="1">
            <ul class="iot_sangping11" id="iot_sangping1">
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
                <li><a><img><div></div><span></span></a></li>
            </ul>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    
    var retu = document.querySelector('#iot_retu')
     axios({
     url:'https://pcapi-xiaotuxian-front.itheima.net/hot/oneStop',
     method:'get',
     params:{
     }
 }).then(result => {
      retu.src=result.data.result.bannerPicture
    //   console.log(result);
 })

    var iot_zongsang = document.querySelector('.iot_retuxia')
    var num3=0;
    var w = 1;
    var g;
    function cn(){
    var xihuan = document.querySelectorAll('.iot_sangping1 li a img')
    var jiesao = document.querySelectorAll('.iot_sangping1 li a div')
    var jiage  = document.querySelectorAll('.iot_sangping1 li a span')
    axios({
        url:'https://pcapi-xiaotuxian-front.itheima.net/hot/oneStop',
        method:'get',
        params :{
            page:w,
        }
    }).then(result => {
        // console.log(result);
        for(var i=0; i <10;i++){
        xihuan[i+(w-1)*10].src = result.data.result.subTypes[0].goodsItems.items[i].picture
        jiesao[i+(w-1)*10].innerHTML = result.data.result.subTypes[0].goodsItems.items[i].name
        jiage[i+(w-1)*10].innerHTML ='￥' +result.data.result.subTypes[0].goodsItems.items[i].price
        // console.log(i);
        // console.log(i-p);
        }
        // console.log(result);
        // console.log(xihuan);
        // console.log(w);
        w=w+1;
        g = w;
    }); 
    }
    cn()
     var jiazai=setInterval(function  bn() {
        var sangping2=document.querySelector('.iot_sangping1')
        let clientHeight  = document.querySelector('.iot_sangping').clientHeight; //浏览器高度
        let scrollHeight = document.querySelector('.iot_sangping').scrollHeight;
        let scrollTop = document.documentElement.scrollTop;   
       //  console.log( clientHeight);
       //  console.log( scrollHeight);
       //  console.log( scrollTop);
       if ((scrollTop + clientHeight) >= (scrollHeight-3)) {
           for(j=0;j<10;j++){
               let li = document.createElement("li")
               let a = document.createElement("a")
               let img = document.createElement("img")
               let div = document.createElement("div")
               let span = document.createElement("span")
               var sangpingzi=sangping2.appendChild(li)
               var azi =sangpingzi.appendChild(a)
               azi.appendChild(img)
               azi.appendChild(div)
               azi.appendChild(span)
           };
                 cn();

        //  clearInterval(jiazai)
    }
   },1)
   var jiazai2;
   var jiazai1;
   var p = 1;

//    点击事件
    iot_zongsang.onclick =function (e) {

	var clicledObj = e.target;
	var num = parseInt(clicledObj.getAttribute('data-id'))
    num3=num;
    clearInterval(jiazai)
    clearInterval(jiazai1)
    clearInterval(jiazai2)
    // console.log(num3);
	var tabs =document.querySelector('.iot_retuxia').children
	// console.log(tabs)
	tabs[num].classList.add('on')
	tabs[1 - num].classList.remove('on')
	var tabs =document.querySelector('#iot_sangping').children
	// console.log(tabs)
	tabs[num].classList.add('active')
	tabs[1 - num].classList.remove('active')
    // console.log(g);
    if(num3 == 0){
    // console.log(g);
    function ccn(){
    var xihuan = document.querySelectorAll('.iot_sangping1 li a img')
    var jiesao = document.querySelectorAll('.iot_sangping1 li a div')
    var jiage  = document.querySelectorAll('.iot_sangping1 li a span')
    axios({
        url:'https://pcapi-xiaotuxian-front.itheima.net/hot/oneStop',
        method:'get',
        params :{
            page:g,
        }
    }).then(result => {
        // console.log(g);
        // console.log(result);
        for(var i=0; i <10;i++){
        xihuan[i+(g-1)*10].src = result.data.result.subTypes[0].goodsItems.items[i].picture
        jiesao[i+(g-1)*10].innerHTML = result.data.result.subTypes[0].goodsItems.items[i].name
        jiage[i+(g-1)*10].innerHTML ='￥' +result.data.result.subTypes[0].goodsItems.items[i].price
        // console.log(i);
        // console.log(i-p);
        }
        // console.log(result);
        // console.log(xihuan);
        g=g+1;
    }); 
    }
          
     jiazai1=setInterval(function  bbn() {
        var sangping2=document.querySelector('.iot_sangping1')
        let clientHeight1  = document.querySelector('.iot_sangping').clientHeight; //浏览器高度
        let scrollHeight1 = document.querySelector('.iot_sangping').scrollHeight;
        let scrollTop1 = document.documentElement.scrollTop;   
       if ((scrollTop1 + clientHeight1) >= (scrollHeight1-3)) {
           for(j=0;j<10;j++){
               let li = document.createElement("li")
               let a = document.createElement("a")
               let img = document.createElement("img")
               let div = document.createElement("div")
               let span = document.createElement("span")
               var sangpingzi=sangping2.appendChild(li)
               var azi =sangpingzi.appendChild(a)
               azi.appendChild(img)
               azi.appendChild(div)
               azi.appendChild(span)
           };
                 ccn()
              }
   },1)
}
  else{
     function aan(){
     var xihuan1 = document.querySelectorAll('.iot_sangping11 li a img')
     var jiesao1 = document.querySelectorAll('.iot_sangping11 li a div')
     var jiage1  = document.querySelectorAll('.iot_sangping11 li a span')
     axios({
         url:'https://pcapi-xiaotuxian-front.itheima.net/hot/oneStop',
         method:'get',
         params :{
             page:p,
         }
     }).then(result => {
        console.log(p);
         // console.log(result);
         for(var j=0; j<10;j++){
         xihuan1[j+(p-1)*10].src = result.data.result.subTypes[1].goodsItems.items[j].picture
         jiesao1[j+(p-1)*10].innerHTML = result.data.result.subTypes[1].goodsItems.items[j].name
         jiage1[j+(p-1)*10].innerHTML ='￥' +result.data.result.subTypes[1].goodsItems.items[j].price
         // console.log(i);
         // console.log(i-p);
         }
         // console.log(result);
         // console.log(xihuan);
         p=p+1;

     }); 
     }
            aan()
      jiazai2=setInterval(function  ddn() {
        var sangping2=document.querySelector('.iot_sangping11')
        let clientHeight2  = document.querySelector('.iot_sangpingyou').clientHeight; //浏览器高度
        let scrollHeight2 = document.querySelector('.iot_sangpingyou').scrollHeight;
        let scrollTop2 = document.documentElement.scrollTop;   
       if ((scrollTop2 + clientHeight2) >= (scrollHeight2-3)) {
           for(q=0;q<10;q++){
               let li = document.createElement("li")
               let a = document.createElement("a")
               let img = document.createElement("img")
               let div = document.createElement("div")
               let span = document.createElement("span")
               var sangpingzi=sangping2.appendChild(li)
               var azi =sangpingzi.appendChild(a)
               azi.appendChild(img)
               azi.appendChild(div)
               azi.appendChild(span)
           };
                aan()}
   },1)
 }
    }
 
</script>
</html>